<template>
	<div class="wrap flex">
		<div class="item" v-for="(v, index) in list" :key="index">
			<div class="imgbox">
				<img :src="v.img" />
			</div>
			<div class="show">
				<p class="wh">{{ v.wh }}</p>
				<p class="address">{{ v.address }}</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					img: require('./img/photo/photo (1).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (2).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (3).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (4).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (5).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (6).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (7).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (8).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (9).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (10).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (11).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (12).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (13).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (14).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (15).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (1).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (2).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (3).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (4).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (5).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (6).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (7).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (8).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (9).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (10).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (11).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (12).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (13).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (14).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
				{
					img: require('./img/photo/photo (15).jpg'),
					wh: '960 x 240',
					address: 'www.aaa.com',
				},
			],
		}
	},
}
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ul > li {
	list-style: none;
}
.flex {
	display: flex;
}
.wrap {
	width: 100%;
	margin-top: 15px;
	flex-wrap: wrap;
	justify-content: space-between;
	.item {
		height: 180px;
		border: 1px solid #ccc;
		margin-bottom: 15px;
		box-shadow: 0px 10px 10px #f7f7f7;
		position: relative;

		.imgbox {
			img {
				height: 180px;
				cursor: pointer;
			}
		}
		.show {
			width: 100%;
			position: absolute;
			bottom: 0;
			color: #fff;
			text-shadow: 0 1px 1px rgb(0 0 0 / 50%);
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.25));
			height: 45px;
			padding: 12px 0;
			animation-delay: 0.1s;
			pointer-events: none;
			opacity: 0;

			p {
				font-size: 8px;
				padding-left: 12px;
			}
			.address {
				cursor: pointer;
			}
		}
		&:hover > .show {
			opacity: 1;
			transition: 0.3s;
		}
	}
}
</style>